<!doctype html>
<html><head>
<meta charset="utf-8">
<title>浏览器信息</title>
    <style>*{

    }</style>
</head>
<body>
<div style="width:1cm;height: 1cm;background: red"></div>
<div id="list"></div>
<div style="width:1cm;height: 1cm;background: red" id="hutia"></div>
<script>
    document.write('您的显示器分辨率为:\n' + screen.width + '*' + screen.height + ' pixels<br/>');
    var w1cm = document.getElementById("hutia").offsetWidth, w = screen.width/w1cm, h = screen.height/w1cm, r = Math.round(Math.sqrt(w*w + h*h) / 2.54);
    document.write('您的显示器尺寸为:\n' + (screen.width/w1cm).toFixed(1) + '*' + (screen.height/w1cm).toFixed(1) + ' cm, '+ r +'寸<br/>');
</script>
    <script type="text/javascript">
    function detectZoom (){
        var ratio = 0,
            screen = window.screen,
            ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
            ratio = window.devicePixelRatio;
        }
        else if (~ua.indexOf('msie')) {
            if (screen.deviceXDPI && screen.logicalXDPI) {
                ratio = screen.deviceXDPI / screen.logicalXDPI;
            }
        }
        else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
            ratio = window.outerWidth / window.innerWidth;
        }
        if (ratio){
            ratio = Math.round(ratio * 100);
        }
        return ratio;
    }
    let result = detectZoom();

    var arr = [],
    list = document.getElementById('list');
    arr.push('网页可见区域宽：'+ document.body.clientWidth);
    arr.push('网页可见区域高：'+ document.body.clientHeight);
    arr.push('网页可见区域宽(包括边线和滚动条的宽)：'+ document.body.offsetWidth);
    arr.push('网页可见区域高(包括边线的宽)：'+ document.body.offsetHeight);
    arr.push('屏幕分辨率的高：'+ window.screen.height);
    arr.push('屏幕分辨率的宽：'+ window.screen.width);
    arr.push('屏幕可用工作区高度：'+ window.screen.availWidth);
    arr.push('屏幕可用工作区宽度：'+ window.screen.availHeight);
    arr.push('屏幕设置位彩色：'+  window.screen.colorDepth );
    arr.push('屏幕设置像素/英寸：'+ window.screen.deviceXDPI );
    arr.push('浏览器缩放：'+ result );
    arr.forEach(item=>{
        let p = document.createElement('p');
        p.innerText = item;
        list.appendChild(p)
    });


</script>
</body>
</html>



